<template>
  <div>
    <hr />
    <h1>过滤器</h1>
    <!-- 过滤器可以使用在 {{}} 和 v-bind绑定的属性上
    过滤器写到管道符后面
    "|" 称为管道符
     -->
    <h1>{{ info | toUpper }}</h1>
    <h1 :title="info | toUpper">xxx</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: "lao zi tian xia di yi?",
    };
  },
  //   过滤器(局部过滤器)
  filters: {
    toUpper(value) {
      console.log(value);
      return value.toUpperCase();
    },
  },
};
</script>

<style lang="scss" scoped>
</style>